<script lang="ts" setup>


import { ref } from 'vue'
import {useUserStore} from '@/stores/moudle/user'
import {baseInfoUpdateNameSerive,baseInfoUpdateGenderSerive,baseInfoUpdateEmailSerive} from '@/api/baseInfo.js'
import { type UploadProps ,type FormItemProps, type FormProps,} from 'element-plus'
const userStore = useUserStore()
const form = ref()
const labelPosition = ref<FormProps['labelPosition']>('right')
const fomModel = ref({
    nickname:userStore.userInfo.nickname || '',
    gender:userStore.userInfo.gender || '',
    email:userStore.userInfo.email || ''
})
const subName = async()=>{
   await form.value.validateField('nickname')
   await baseInfoUpdateNameSerive(fomModel.value.nickname)
   userStore.getUserinfo()
   ElMessage.success('更换名字成功！')
}
const subGender =async ()=>{
  await form.value.validateField('gender')
  await baseInfoUpdateGenderSerive(fomModel.value.gender)
  userStore.getUserinfo()
  ElMessage.success('更换性别成功！')
}
const subEmail = async()=>{
  await form.value.validateField('email')
  await baseInfoUpdateEmailSerive(fomModel.value.email)
  userStore.getUserinfo()
  ElMessage.success('更换邮箱成功！')
}
const rules = {
  email:[
       {pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,message:'邮箱输入不合法',trigger:'blur'}
  ],
  nickname:[
       {required:true,message:'请输入姓名',trigger:'blur'},
      {min:2,message:'姓名至少是 2 位的字符',trigger:'blur'},
  ],
    gender:[
       {required:true,message:'请输入性别',trigger:'blur'},
  ]
}
</script>

<template>
  <el-card>

<div class="wrapped">
 <el-form  ref="form"  :label-position="labelPosition" :rules="rules"
    label-width="auto" :model="fomModel" style="max-width: 600px"  class="demo-form-inline">
    <el-form-item label="用户账号："  >
     <el-input disabled v-model="userStore.userInfo.username"/>
    </el-form-item>
        <el-form-item label="用户姓名：" prop="nickname">
     <el-input v-model="fomModel.nickname" />
     <el-button type="primary" @click="subName">保存</el-button>
    </el-form-item>
    <el-form-item label="用户性别：" prop="gender">
     <el-select v-model="fomModel.gender">
      <el-option value="男" label="男" />

      <el-option value="女" label="女" />
     </el-select>
      <el-button type="primary" @click="subGender">保存</el-button>
    </el-form-item>
      <el-form-item label="用户身份：">
     <el-input disabled v-model="userStore.userInfo.identify" />
    </el-form-item>
    <el-form-item label="所属部门：">
     <el-input disabled v-model="userStore.userInfo.department" />
    </el-form-item>
    <el-form-item label="用户邮箱：" prop="email">
     <el-input  v-model="fomModel.email"/>
     <el-button type="primary" @click="subEmail">保存</el-button>
    </el-form-item>
    </el-form>
    </div>
      </el-card>
</template>


<style lang="scss" scoped>

.wrapped{
  height: 600px;
}
.el-form{
  .el-form-item{
     .el-select, .el-input{
      width: 200px;
    }
  
    .el-button{
      margin: 0 20px;
    }            
   
  }
}
#el-id-7213-33{
  margin-top: 80px ;
}
</style>